<template>
	<view class="register-container">
		<view class="form-container">
			<view class="form-item">
				<view class="icon-wrapper">
					<text class="iconfont">&#xe67b;</text>
				</view>
				<input type="number" placeholder="请输入手机号" v-model="phone" @input="handlePhoneInput" />
			</view>

			<view class="form-item">
				<view class="icon-wrapper">
					<text class="iconfont">&#xe67e;</text>
				</view>
				<input type="number" placeholder="请输入验证码" v-model="code" />
				<button class="code-btn" :disabled="!isPhoneValid || countdown > 0" @click="getCode">
					{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
				</button>
			</view>

			<view class="form-item">
				<view class="icon-wrapper">
					<text class="iconfont">&#xe682;</text>
				</view>
				<input type="password" placeholder="请输入新密码" v-model="password" password="true" />
			</view>

			<view class="form-item">
				<view class="icon-wrapper">
					<text class="icon">&#xe682;</text>
				</view>
				<input type="password" placeholder="请再次输入新密码" v-model="confirmPassword" password="true" />
			</view>
		</view>

		<button class="register-btn" :disabled="!canSubmit" @click="submitForm">修改密码</button>
	</view>
</template>

<script>
	import api from '../../api/request';

	export default {
		data() {
			return {
				phone: '',
				code: '',
				password: '',
				confirmPassword: '',
				countdown: 0,
				isPhoneValid: false,
				openid: ''
			};
		},
		onLoad() {
			// 从缓存中获取openid
			this.openid = uni.getStorageSync('openid') || '';
		},
		computed: {
			canSubmit() {
				return this.isPhoneValid && this.code && this.password && this.confirmPassword && this.password === this
					.confirmPassword;
			}
		},
		methods: {
			handlePhoneInput(e) {
				const phone = e.detail.value;
				this.phone = phone;
				// 简单的手机号验证
				this.isPhoneValid = /^1[3-9]\d{9}$/.test(phone);
			},

			// 获取验证码
			getCode() {
				console.error('getCodegetCode');
				if (!this.isPhoneValid) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				// 1注册验证码 2忘记密码验证码 3修改密码验证码，4修改支付密码 5微信登录绑定手机号
				this.$api.getSmsCode({
						phone: this.phone,
						type: 2
					})
					.then(res => {
						uni.showToast({
							title: '验证码发送成功',
							icon: 'success'
						});
						// 开始倒计时
						this.countdown = 60;
						const timer = setInterval(() => {
							this.countdown--;
							if (this.countdown <= 0) {
								clearInterval(timer);
							}
						}, 1000);
					})
					.catch(error => {
						console.error('获取验证码失败', error);
					});
			},



			// 提交表单
			submitForm() {
				if (this.password !== this.confirmPassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					});
					return;
				}

				const registerData = {
					phone: this.phone,
					code: this.code,
					password: this.password,
					re_password: this.confirmPassword
				};

				this.$api.wxchatfindPwd(registerData)
					.then(res => {
						uni.hideLoading();
						uni.showToast({
							title: '找回成功',
							icon: 'success'
						});
						// 注册成功后跳转到首页
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 1500);
					})
					.catch(error => {
						uni.hideLoading();
						uni.showToast({
							title: error.msg,
							icon: 'none'
						});
						console.error('找回失败', error);
					});
			},

			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped>
	.register-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	.header {
		height: 80rpx;
		background-color: #e61e2b;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding-top: 20rpx;
	}

	.back-btn {
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
	}

	.back-icon {
		font-family: 'iconfont';
		font-size: 36rpx;
	}

	.header .title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}

	.form-container {
		padding: 40rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e0e0e0;
		padding: 20rpx 0;
		position: relative;
	}

	.icon-wrapper {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #e61e2b;
	}

	.icon {
		font-family: 'iconfont';
		font-size: 32rpx;
	}

	input {
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
		padding-left: 20rpx;
	}

	.code-btn {
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #e61e2b;
		color: #fff;
		font-size: 24rpx;
		border-radius: 25rpx;
		position: absolute;
		right: 0;
		z-index: 999999999;
	}

	.register-btn {
		margin: 60rpx 40rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #e61e2b;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
	}
</style>